<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Head Page</title>

    <link type="text/css" rel="stylesheet" href="/static/css/bootstrap_3.3.7_css_bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="/static/css/bootstrap_3.3.7_css_bootstrap-theme.min.css" />

    <script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap_3.3.7_js_bootstrap.min.js"></script>

</head>
<body>
<div class="hrms_brand_nav">
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hrms-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" id="company_logo" href="#">XXX公司LOGO</a>
            </div>

            <div class="collapse navbar-collapse" id="hrms-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">公司介绍 <span class="sr-only">(current)</span>  </a>
                    </li>
                    <li><a href="#">人力资源部</a></li>
                    <li><a href="#">请假申请</a></li>
                    <li><a href="#">报销申请</a></li>
                    <li><a href="#">出勤记录</a></li>
                </ul>

                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="站内搜索">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>

                <img src="<%=request.getContextPath()%>/state/${picture.userHeader}" style="width:50px;height: 50px;border-radius: 50%;margin-left: 300px;">

                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">账号管理 <span class="caret"></span></a>
                        <ul class="dropdown-menu nav nav-pills nav-stacked">
                            <li class="active">
                                <a href="${pageContext.request.contextPath}/selectUserInfor?uid=${userId}">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                    修改信息
                                </a></li>
                            <li>
                                <a type="button" data-toggle="modal" data-target="#exampleModal">
                                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                                头像更换
                            </a>
                            </li>
                            <li><a href="/user/logout" class="hrms_logout"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> 账号退出</a></li>
                        </ul>
                    </li>
                </ul><!-- /.nav navbar-nav navbar-right -->
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div><!-- /.hrms_brand_nav -->
<!--Model-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">修改用户头像</h4>
            </div>
            <form action="<%=request.getContextPath()%>/insert/header"  method="post">
                <div class="modal-body">
                    <input type="text" name="userId" hidden="hidden" value="${userId}">
                    <div>
                        <form  enctype="multipart/form-data" method="post" />
                            <img src="/static/img/login_logo.png" id="userphoto"  style="width:80px;height: 80px;margin-left:230px;" />
                            <input type="file" value="上传文件" id="app" style="width: 150px;font-size: 10px; border-radius: 10px;margin-left:200px;  " />
                            <input type="button" id="mybtn" value="上传头像" style="margin-left:230px;" >
                    </div>
                    <input type="text" id="picture" name="userHeader" hidden="hidden">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="" src="/static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever') // Extract info from data-* attributes
        var modal = $(this)
        modal.find('.modal-body input').val(recipient)
    })
</script>
<script >
    var photo;
    jQuery("#mybtn").click(function(){
        var fromdata = new FormData();
        //上传头像
        fromdata.append("file", document.getElementById("app").files[0]);
        jQuery.ajax({
            type: 'POST',
            url: "http://localhost:8080/user/upload",
            cache: false,
            dataType:'JSON',
            data: fromdata,
            contentType: false,
            processData: false,
            async: true,
            success: function(data){
                alert("上传成功");
                jQuery("#userphoto").prop("src","/state/"+data.data);
                photo=data.data;
                jQuery("#picture").val(photo);
            },
            error: function(){
                alert("请上传头像");
            }
        })
    })
</script>
</body>
</html>
